<template>
  <a-row :gutter="10">
    <a-col :sm="24" style="margin-bottom: 20px">
      <a-card :bordered="false">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
          <!-- 搜索区域 -->
          <a-form layout="inline">
            <a-row :gutter="24">
              <a-col :md="7" :sm="8">
                <a-form-item
                  label="表单名称"
                  :labelCol="{ span: 5 }"
                  :wrapperCol="{ span: 18 }"
                >
                  <a-input
                    placeholder="请输入表单名称"
                    allowClear
                    v-model="threadForm.formName"
                  ></a-input>
                </a-form-item>
              </a-col>
              <a-col :md="7" :sm="8">
                <a-form-item
                  label="适用部门"
                  :labelCol="{ span: 5 }"
                  :wrapperCol="{ span: 18 }"
                >
                  <a-select
                    :value="threadForm.serviceId"
                    placeholder="请选择适用部门"
                    @change="serviceChange"
                  >
                    <a-select-option value="">
                      全部
                    </a-select-option>
                    <a-select-option
                      v-for="item in departOptions"
                      :key="item.id"
                      :value="item.id"
                    >
                      {{ item.departName }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="7" :sm="8">
                <a-form-item
                  :labelCol="{ span: 0 }"
                  :wrapperCol="{ span: 18, offset: 1 }"
                >
                  <a-button type="primary" @click="selectInfo()">查询</a-button>
                  <a-button style="margin-left: 8px" @click="resetForm"
                    >清空搜索项</a-button>
                  <a-button style="margin-left: 8px" type="primary" @click="addFormFun">创建表单</a-button>
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </div>
        <div style="margin-top: 15px">
          <a-table
            style="height: 500px"
            ref="table"
            size="middle"
            bordered
            rowKey="id"
            :columns="columns"
            :dataSource="dataSource"
            :pagination="ipagination"
            :loading="loading"
          >
            
            <span slot="action" slot-scope="next, record">
              <a @click="showDrawer(record)">详情</a>
              <a-divider type='vertical' />
              <a-popconfirm title='确定删除吗?' @confirm='() => handleDelete(record)'>
                <a>删除</a>
              </a-popconfirm>
            </span>
          </a-table>
        </div>
      </a-card>
    </a-col>
    <!-- 创建表单-详情 -->
    <a-modal :visible="visible" :title="isAdd ? '创建表单' : '表单详情'" width="60%" @cancel="cancelFun">
      <template #footer>
        <a-button key="submit" type="primary" :loading="loading" @click="determine">确定</a-button>
      </template>
        <div class="con_wrap">
            <a-tabs :activeKey="activeKey" type="card" @change="tabFun">
                <a-tab-pane key="1" tab="基础设置">
                    <a-form layout="vertical" :model="formData">
                        <a-form-item
                        label="表单名称"
                        name="formName"
                        :rules="[{ required: true, message: '请输入表单名称' }]"
                        >
                        <a-input
                            style="width:40%"
                            placeholder="请输入表单名称"
                            v-model="formData.formName"
                        ></a-input>
                        </a-form-item>
                        <a-form-item
                        label="表单描述"
                        >
                        <a-input
                            style="width:40%"
                            placeholder="请输入表单描述"
                            v-model="formData.formDesc"
                        ></a-input>
                        </a-form-item>
                        <a-form-item
                        label="适用部门"
                        >
                        <a-select
                          :value="formData.serviceId"
                          mode="multiple"
                          style="width: 40%"
                          @change="serviceSeleChange"
                          placeholder="适用部门">
                          <a-select-option
                            v-for="item in departOptions"
                            :key="item.id"
                            :value="item.id"
                          >
                            {{ item.departName }}
                          </a-select-option>
                        </a-select>
                        </a-form-item>
                        <a-form-item
                        label="表单banner (同一组图片宽高比必须相同，最多5张图片)">
                        <a-upload
                          :headers="headers"
                          :action="uploadAction"
                          list-type="picture-card"
                          :file-list="fileList"
                          @preview="handlePreview"
                          @change="handleChange($event,'banner')"
                          :class="[fileList.length > 5 ? 'image-upload-single-over' : '']"
                        >
                          <div v-if="fileList.length < 5">
                            <a-icon type="plus" />
                            <div class="ant-upload-text">上传</div>
                          </div>
                        </a-upload>
                        </a-form-item>
                        <a-form-item
                        label="状态"
                        >
                        <a-space>
                            <a-select
                            ref="select"
                            :value="formData.status"
                            @change="statusChange"
                            style="width: 120px"
                            >
                            <a-select-option :value="1">启用</a-select-option>
                            <a-select-option :value="2">禁用</a-select-option>
                            </a-select>
                        </a-space>
                        </a-form-item>
                    </a-form>    
                </a-tab-pane>
                 <!-- 表单设计 -->
                <!-- <a-tab-pane key="2" tab="表单设计">  
                  <a-row type="flex" :gutter="16">
                    <a-col :span="8">
                      <div class="designBox">
                        <p>个人信息</p>
                        <a-row type="flex" :gutter="[16,{ xs: 2, sm: 4, md: 8, lg: 16 }]">
                          <a-col :span="6">
                              <div class="msgBox" data-type="input" id="item1" draggable="true">姓名</div> 
                          </a-col>
                          <a-col :span="6">
                              <div class="msgBox" data-type="input" id="item2" draggable="true">手机</div>
                          </a-col>
                          <a-col :span="6">
                              <div class="msgBox" data-type="input" id="item3" draggable="true">性别</div>
                          </a-col>
                          <a-col :span="6">
                              <div class="msgBox" data-type="input" id="item4" draggable="true">年龄</div>
                          </a-col>
                          <a-col :span="6">
                              <div class="msgBox" data-type="input" id="item5" draggable="true">身份证号</div>
                          </a-col>
                          <a-col :span="6">
                              <div class="msgBox">其他</div>
                          </a-col>
                        </a-row>
                      </div>
                      <div class="designBox">
                        <p>选择题</p>
                        <a-row type="flex" :gutter="[16,{ xs: 2, sm: 4, md: 8, lg: 16 }]">
                          <a-col :span="6">
                              <div class="msgBox">单选题</div> 
                          </a-col>
                          <a-col :span="6">
                              <div class="msgBox">多选题</div>
                          </a-col>
                          <a-col :span="6">
                              <div class="msgBox">日期</div>
                          </a-col>
                          <a-col :span="6">
                              <div class="msgBox">时间</div>
                          </a-col>
                          <a-col :span="6">
                              <div class="msgBox">日期时间</div>
                          </a-col>
                          <a-col :span="6">
                              <div class="msgBox">省市区</div>
                          </a-col>
                          <a-col :span="6">
                              <div class="msgBox">上传附件</div>
                          </a-col>
                        </a-row>
                      </div>
                      <div class="designBox">
                        <p>填空题</p>
                        <a-row type="flex" :gutter="[16,{ xs: 2, sm: 4, md: 8, lg: 16 }]">
                            <a-col :span="6">
                                <div class="msgBox">单行文本</div> 
                            </a-col>
                            <a-col :span="6">
                                <div class="msgBox">多行文本</div>
                            </a-col>
                            <a-col :span="6">
                                <div class="msgBox">富文本</div>
                            </a-col>
                            <a-col :span="6">
                                <div class="msgBox">签名</div>
                            </a-col> 
                        </a-row>
                      </div>
                    </a-col>
                    <a-col :span="8">
                      <div class="operationBox"></div>
                    </a-col>
                    <a-col :span="8">
                      <a-form layout="inline">
                          <p>名称</p>
                          <a-input class="operationInput "  
                                  value="姓名" 
                              ></a-input>
                          <div class=""></div>
                            <p>提示</p>             
                              <a-input class="operationInput "  
                                  value="请输入姓名" 
                              ></a-input>
                          <div> 必填   <a-switch checked="checked" /></div>    
                      </a-form>
                    </a-col>
                </a-row>
              </a-tab-pane> -->
              <a-tab-pane key="3" tab="流程模式设置">
                  <a-form layout="vertical" :model="formData">
                    <a-form-item
                      label="流程模式"
                      name="processMode"
                      :rules="[{ required: true, }]"
                      >
                      <a-radio-group :value="formData.processMode" @change="radioGroupChenge">
                          <a-radio :value="1">抢单模式</a-radio>
                          <a-radio :value="2">指定模式</a-radio> 
                      </a-radio-group> 
                    </a-form-item>
                    <a-form-item
                      label="指定员工"
                      name="processMode"
                      :rules="[{ required: true, }]"
                      v-if="formData.processMode ==2"
                      >
                      <a-select
                        @change="selectChenge1"
                        :value="department1"
                        placeholder="请选择部门"
                        style="width: 120px;margin-right:20px">
                        <a-select-option v-for="(item, index) in departmentList" :key="index" :value="item.id">{{item.title}}</a-select-option>
                      </a-select>
                      <a-select
                        :value="teamval"
                        placeholder="请选择员工"
                        @change="teamSelectChenge1"
                        style="width: 120px"
                        >
                        <a-select-option :value="item.id" v-for="(item, index) in teamList" :key="index">{{item.realname}}</a-select-option>
                      </a-select>
                     </a-form-item> 
                     <a-form-item
                      label="抄送给"
                      name="processMode"
                      :rules="[{ required: true, }]"
                      >
                      <a-select
                        @change="departmentSelet"
                        placeholder="请选择部门"
                        :value="department2"
                        style="width: 120px;margin-right:20px">
                        <a-select-option v-for="(item, index) in departmentList" :key="index" :value="item.id">{{item.title}}</a-select-option>
                      </a-select>
                      <a-select
                        :value="teamval2"
                        placeholder="请选择员工"
                        @change="teamSelectChenge2"
                        style="width: 120px"
                        >
                        <a-select-option :value="item.id" v-for="(item, index) in teamList2" :key="index">{{item.realname}}</a-select-option>
                      </a-select>
                     </a-form-item> 
                     <div class="mgt30"> 允许转单   <a-switch :checked="formData.isAllowTransfer== 0 ? false : true"  @change="AllowTransfer"/></div>    
                  </a-form>
              </a-tab-pane>
            </a-tabs>
        
      </div>
    </a-modal>

  </a-row>
</template>
<script>
import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'
// import draggable from "vuedraggable";
// import {formItems,assistFormItems,layoutFormItems} from "@/components/custom/itemList";
// import formConf from "@/components/custom/formConf";
import {
  queryById,
  queryPageList,
  queryAll,
  MyDeptTreeList,
  departUserList,
  serviceAdd,
  serviceEdit,
  deleteByIds,
  getAllDepTreeList
} from "@/api/formManage";
import Timeline from "@/components/Timeline/timelinelist";

export default {
  name: "formManage",
  components: {
    "time-line": Timeline,
    // draggable
    },
  data() {
    return {
      headers: {},
      createBy: "",
      uploadAction: window._CONFIG['domianURL'] + '/sys/common/upload',
      dataSource: [],
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ["10", "20", "30"],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条";
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
      },
      loading: false,
      columns: [
        {
          title: "表单名称",
          align: "center",
          dataIndex: "formName",
        },
        {
          title: "适用部门",
          align: "center",
          dataIndex: "serviceName",
        },
        {
          title: "创建时间",
          align: "center",
          dataIndex: "createTime",
        },
        {
          title: "操作",
          dataIndex: "action",
          align: "center",
          scopedSlots: { customRender: "action" },
        },
      ],
      departOptions: [],
      threadForm: {
        formName: "", //	表单名称
        serviceId: undefined, // 服务
        status: "1", // 状态 1-启用 2-禁止
      },
      // 详情
      pstyle1: {
        fontSize: "20px",
        color: "black",
        borderBottom: "1px solid #eeeeee",
        paddingBottom: "10px",
      },
      pstyle2: {
        fontSize: "17px",
        borderBottom: "1px solid #eeeeee",
        width: "100%",
        left: 0,
        lineHeight: "30px",
        padding: "20px",
      },
      visible: false,
      contacts: "", // 联系人
      contactTel: "", // 联系电话
      allocationStatus: "",
      allocationId: "",
      ownerUserId: "", //所属用户id
      threadId: "",

      // 详情
      activeKey: "1",
     
      departmentList:[], // 部门列表
      department1: undefined, //
      department2: undefined,// 部门2
      teamList:[],
      teamList2:[],
      teamval: undefined, // 组员1
      teamval2: undefined, // 组员2

      isAdd: 1, // 是否创建还是修改
      formData: {
        appointUser: "", // 指定用户id
        banner: [], // banner图片
        ccForUser: "", // 抄送用户id
        createBy: "", // 创建人
        createTime: "", // 创建日期
        delFlag: 0, // 删除状态0-否1-是
        desformDesignJson: "", // 设计表单json
        formDesc: "", // 表单描述
        formName: "", // 表单名称
        id: "", // id
        isAllowTransfer: 1, // 是否允许转单
        processMode: 1, //流程模式1-抢单模式,2-指定模式
        serviceId: [], // 服务id
        status: 1, // 	状态1-启用，2-禁用
        updateBy: "", // 	更新人
        updateTime: "" // 更新日期
      },
      fileList: [], //
      previewVisible: false,
      previewImage: '',
    };
  },
  mounted() {
    const token = Vue.ls.get(ACCESS_TOKEN)
    this.createBy = JSON.parse(window.localStorage.getItem("pro__Login_Userinfo"))
        .value.username;
    this.headers = { 'X-Access-Token': token }
    this.getList();
    this.getAllDepTreeList()
    this.getMyDeptTreeList()
  },
  methods: {

    // 获取所有部门列表 
    async getAllDepTreeList() {
      const res = await getAllDepTreeList();
      this.departOptions = res.result;
    },

    // 获取列表数据
    async getList() {
      let data = {
        pageNo: this.ipagination.current,
        pageSize: this.ipagination.pageSize,
        formName: this.threadForm.formName, // 表单名称
        serviceId: this.threadForm.serviceId, // 服务id
        // status: this.threadForm.status, // 状态
      };
      const res = await queryPageList(data);
      this.dataSource = res.result.records;
      this.ipagination.total = res.result.total;
    },

    // 获取详情
    async getDetails(id) {
      this.fileList = [];
      const res = await queryById({ id });
      res.result.banner && res.result.banner.forEach((item, index)=>{
        let obj = {
          response:{message: item},
          uid: index + `_${index+1}`,
          name: item,
          status: 'done',
          url: 'https://jbd.iminggu.com/jeecg-boot/sys/common/static/'+item
        }
        this.fileList.push(obj)
      })
      this.formData = res.result; // response
      if(res.result.appointUserDept){
        this.department1 = res.result.appointUserDept // 指定员工部门
        await this.getDepartUserList(res.result.appointUserDept, 1, res.result.appointUser)
        console.log(11)
      }
      if(res.result.ccForUserDept){
        this.department2 = res.result.ccForUserDept
        await this.getDepartUserList(res.result.ccForUserDept, 2, res.result.ccForUser)
        console.log(22)
      }
      
      
    },

    // 查询
    selectInfo() {
      this.ipagination.current = 1
      this.getList();
    },
    // 提交时间
    onPickerChange(data, dateString) {
      this.threadForm.time = dateString;
    },
    onPickerChange2(data, dateString) {
      this.threadForm.followtime = dateString
    },
    // 表单重置
    resetForm() {
      this.threadForm.formName = "";
      this.threadForm.serviceId = undefined;
      this.getList();
    },
    // 详情弹框
    showDrawer(value) {
      this.visible = true;
      this.isAdd = 0
      this.getDetails(value.id);
    },
    // 删除
    async handleDelete(record) {
      const params = {
        ids: record.id
      }
      const res = await deleteByIds(params)
      if (res.success == true) {
        this.$message.success('删除成功')
        this.getList()
      }
    },

    // 关闭弹出
    cancelFun(){
      this.visible = false;
      this.activeKey = "1"
    },

    // 服务选择
    serviceChange(value) {
      this.threadForm.serviceId = value;
    },

    // tab切换
    tabFun(index){
      this.activeKey = index
    },

    // 创建表单
    addFormFun(){
      this.visible = true;
      this.isAdd = 1
      this.formData = {
        appointUser: "", // 指定用户id
        banner: [], // banner图片
        ccForUser: "", // 抄送用户id
        createBy: "", // 创建人
        createTime: "", // 创建日期
        delFlag: 0, // 删除状态0-否1-是
        desformDesignJson: "", // 设计表单json
        formDesc: "", // 表单描述
        formName: "", // 表单名称
        id: "", // id
        isAllowTransfer: 1, // 是否允许转单
        processMode: 1, //流程模式1-抢单模式,2-指定模式
        serviceId: [], // 服务id
        status: 1, // 	状态1-启用，2-禁用
        updateBy: "", // 	更新人
        updateTime: "" // 更新日期
      }
    },

    //获取部门信息。
    async getMyDeptTreeList(){
      let res = await MyDeptTreeList()
      this.departmentList = res.result
    },
    //获取部门信息。
    async getDepartUserList(id, index, key=''){
      let res = await departUserList({depId: id})
      if(index == 1){
        this.teamList = res.result.records
        this.teamval = key ? key : undefined // 指定员工部门
      }else{
        this.teamList2 = res.result.records
        this.teamval2 = key ? key : undefined // 抄送用户部门id
      }
    },
    // 状态选择
    statusChange(value) {
      this.formData.status = value;
    },
    // 是否转单
    AllowTransfer(val){
      this.formData.isAllowTransfer = val
    },
    radioGroupChenge(e){
      this.formData.processMode = e.target.value
    },
    // 指派
    selectChenge1(val){
      this.department1 = val
      this.teamval = undefined
      this.getDepartUserList(val, 1)
    },
    // 组员选择1
    teamSelectChenge1(val){
      this.teamval =  val
    },
    // 抄送部门
    departmentSelet(val){
      this.department2 = val
      this.teamval2 = undefined
      this.getDepartUserList(val, 2)
    },
    // 组员选择2
    teamSelectChenge2(val){
      this.teamval2 =  val
    },
    // 创建，修改 适用部门选择
    serviceSeleChange(val){
      this.formData.serviceId = val
    },
    

    // 预览
    handlePreview(file) {
      this.previewImage = file.url || file.thumbUrl
      this.previewVisible = true
    },
    handleChange({fileList}) {
      this.fileList = fileList
    },
    handleCancel() {
      this.previewVisible = false
    },
    // 确定提交
    determine(){
      if(this.formData.formName.trim() == ''){
        this.$message.error('输入表单名称！')
        return 
      }
      if(this.formData.processMode ==2 && (this.teamval =="" || this.teamval ==undefined)){ // 指定
        this.$message.error('请选择指定人员')
        return 
      }
      const list = [];
      this.fileList.forEach((item) => {
        list.push(item.response.message)
      })
      let data = {
        banner: list,
        ccForUser: this.teamval2,
        createBy: this.createBy,
        createTime: this.formData.createTime,
        delFlag: this.formData.delFlag,
        desformDesignJson: this.formData.desformDesignJson,
        formDesc: this.formData.formDesc,
        formName: this.formData.formName,
        id: this.formData.id,
        isAllowTransfer: this.formData.isAllowTransfer ? 1 : 0,
        processMode: this.formData.processMode,
        serviceId: this.formData.serviceId,
        status: this.formData.status,
        updateBy: this.formData.updateBy,
        updateTime: this.formData.updateTime
      };
      if(this.formData.processMode ==2){ // 指定
        data.appointUser = this.teamval
      }
      if(this.isAdd){// 创建
        serviceAdd(data).then(res =>{
          if(res.success == true){
            this.visible = false;
            this.activeKey = "1"
            this.getList();
          }
        })
      }else{// 修改
        serviceEdit(data).then(res =>{
          if(res.success == true){
            this.visible = false;
            this.activeKey = "1"
            this.getList();
          }
        })
      }
    }


  },
};
</script>
<style lang="less" scoped>
/** Button按钮间距 */
.ant-btn {
  margin-left: 8px;
}
.allotDialog-top {
  font-size: 16px;
  border-bottom: 1px solid #eee;
  .allotDialog-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .info-left {
      width: 100%;
      height: 60px;
      background: #fafafa;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .info-tag {
        background: rgba(255, 171, 45, 0.12);
        border-radius: 4px;
        font-size: 14px;
        font-weight: 400;
        color: #ffab2d;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 11px;
        margin-right: 38px;
      }
      .name {
        .tag {
          margin-left: 10px;
          font-size: 14px;
          color: rgb(255, 115, 0);
        }
      }
      .phone {
        span:nth-child(1) {
          margin: 0 20px;
        }
      }
    }
  }
  .allotDialog-remark {
    padding: 22px 26px;
    font-size: 14px;
    font-weight: 400;
    color: #656565;
    border-top: 1px solid #e8e8e8;
  }
}
.select-content {
  padding: 22px 25px;
  .select-title {
    display: flex;
    justify-content: space-between;
    div {
      flex: 1;
    }
  }
  .select-btn {
    margin: 10px 0;
    display: flex;
    justify-content: space-between;
    div {
      flex: 1;
    }
  }
}
.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 474px;
  height: 60px;
  background: #fafafa;
  .info-tag {
    background: rgba(255, 171, 45, 0.12);
    border-radius: 4px;
    font-size: 14px;
    font-weight: 400;
    color: #ffab2d;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
    margin-left: 18px;
  }
  .allocation_right {
    margin-right: 23px;
  }
  .phone {
    display: flex;
    align-items: center;
    span:nth-child(1) {
      margin: 0 20px;
    }
  }
}
.col-title {
  display: inline-block;
  width: 120px;
  color: #000000;
  margin-right: 20px;
}
.col-text {
  font-size: 17px;
  font-family: MicrosoftYaHei;
  font-weight: 400;
  color: #bbbbbb;
}
/deep/.ant-modal-body {
  padding: 0;
}
.con_wrap{
  padding: 20px;
  height: 65vh;
  overflow: auto;
  .userTag {
    padding-bottom: 20px;
  .userTag_title {
    margin-bottom: 10px;
    font-size: 15px;
    font-weight: 550;
  }
  .listWrap{
    overflow: hidden;
    .listwrap_item{
      border-radius: 5px;
      margin-bottom: 10px;
      overflow: hidden;
      .listShow{
        padding:10px 10px 5px;
        background-color: #f5f5f5;
        .ant-row{
          margin-bottom: 5px;
        }
      }
      .listShow2{
        padding: 5px 10px 10px;
        border-top: 1px solid #dedede;
        background-color: #f5f5f5;
        .ant-row{
          margin-bottom: 5px;
        }
      }
    }
  }

  }
  .designBox{
      margin-bottom:40px;
       .msgBox{
        height:34px; 
        line-height: 34px;
        text-align: center;
        border: 1px solid #e8e8e8;
       }
  }
  .operationBox{
      height:600px;
      background: #fafafa;
  }
  .operationInput{
      margin-bottom:10px;
  }
  .mgt30{
      margin-top:20px;
  }

}
// .userTag {
//   padding: 24px;
//   .userTag_title {
//     margin-bottom: 23px;
//   }
// }
/deep/.ant-drawer-body {
  padding: 0;
}
/deep/ .ant-calendar-picker{
  width: auto !important;
}
.allotDialog-remarks {
  padding: 22px 26px;
  font-size: 18px;
  font-weight: 400;
  color: #656565;
  border-top: 1px solid #e8e8e8;
}
.flex {
  display: flex;
}
.flex-a-c {
  align-items: center;
}

.flex-j-s-b {
  justify-content: space-between;
}

.ant-form {
  padding: 20px 0 0 0;
}
.timeTitle {
  margin: 20px 0;
}


</style>
